<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery+html5烂漫爱心表白动画 - 站长素材</title>

<style type="text/css">
@font-face {
	font-family: digit;
	src: url('digital-7_mono.ttf') format("truetype");
}
</style>

<link href="css/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
 <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
 <link rel="stylesheet" href="css/textstyle.css" media="screen" type="text/css" />
</head>

<body>
<div style="text-align:center;clear:both;position:absolute;top:-250px;left:50px;z-index:999">
</div>
<div id="mainDiv">
	<div id="contents">
      <div id="code">
      <p class="comments .sp">/*</p>
      <p class="space .sp"/><p class="comments .sp">*2013—09-15,</p>
      <p class="space .sp"/><p class="comments .sp">*2016-04-14.</p>
      <p class="space .sp"/><p class="comments .sp">*/</p>
      <p class="keyword .sp">2013年9月15日，我们来到了怀化学院东校区</p>
      <p class="keyword .sp">稍息，立正</p>
      <p class="comments .sp">//曾经我们 是青涩懵懂的少年</p>
    <p style="padding: 2px;">   如今我们是阅历丰富的“老油条”;</p>
      <p class="comments .sp">//曾打着见习的名义，摇着“轰隆轰隆”叫嚣的绿皮车</p>
		 <p style="padding: 2px;">瞅到了咱伟大的首都北京，那feel倍爽儿；</p>      
      <p class="comments .sp">//曾我们在课堂上呼噜着时光</p>
      <p style="padding: 2px;"> 醒来一大巴掌的红印子。</p>
      <p class="comments .sp">//我们变得爱吃鱼，爱烤肉，各种聚餐</p>
     <p style="padding: 2px;">  而苗条帅气的我们不知不觉已有大肚子；</p>
      <p class="comments .sp">//13级5班的时光就这样子逝去了……</p><br />
      <p class="comments .sp">// 不过，有个事实不会变得就是</p>
      <p class="keyword .sp">1305的男同学</p> very <p class="keyword">handsome;</p>
      <p class="keyword .sp">1305的女同学</p> is also very <p class="keyword">beautiful;</p><br />
      <p class="placeholder .sp"/><p class="comments">// 开始的开始 我们都是孩子</p>
      <p class="placeholder .sp"/><p class="comments">// 最后的最后 我们已是****</p><br />
      <p class="placeholder .sp"/>5年后，10年后，20年后……<br />
      <p class="comments .sp">// 也许谁都忘记谁的名字 ，但会都记得怀院1305的日子</p><br />
      <a href="photo.html"><b>end</b></a>
    </div>
	</div>


   <div id="animation">
   
 <div style="margin: 0px 52px 101px;position: absolute;height: 200px;text-align: center;clear: both;float: left;width: 600px;top: -302px;left: 160px;">
  <div class="loader font1">
  <span class="frist">纪</span>
  <span class="p2">念</span>
  <span class="p3">手</span>
  <span class="p4">册</span>
</div>
</div>
    <div class="bike">
             <div class="basket"><div class="basket-screw"></div></div>

      <div class="front wheel">
            <div class="rim">
                <div class="air"></div>
            </div>
            <div class="hub"></div>
            <div class="spokes">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>

        <div class="frame">
            <div></div>
            <div></div>
            <div></div>
            <div class="small"></div>
            <div></div>
            <div class="small"></div>
        </div>

       <div class="seat">
            <div class="support"></div>
            <div class="saddle"></div>
        </div>

      <div class="handlebars">
          <div class="handle"><div class="handle-hub"></div></div>

        </div>

      <div class="pedals">
            <div class="gear">
                <div class="hub"></div>
                <div class="struts">
                </div>
            </div>
            <div class="front pedal">
                <div class="footpad"></div>
            </div>
            <div class="back pedal">
                <div class="footpad"></div>
            </div>
        </div>

        <div class="back wheel">
              <div class="rim">
                  <div class="air"></div>
              </div>
              <div class="hub"></div>
              <div class="gear"></div>
              <div class="spokes">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
              </div>
          </div>
        <div class="chain"></div>

    </div>
</div>

</div>

<script type="text/javascript">
var offsetX = $("#loveHeart").width() / 2;
var offsetY = $("#loveHeart").height() / 2 - 55;
var together = new Date();
together.setFullYear(2013, 9, 15);
together.setHours(20);
together.setMinutes(0);
together.setSeconds(0);
together.setMilliseconds(0);

if (!document.createElement('canvas').getContext) {
	var msg = document.createElement("div");
	msg.id = "errorMsg";
	msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+"; 
	document.body.appendChild(msg);
	$("#code").css("display", "none")
	$("#copyright").css("position", "absolute");
	$("#copyright").css("bottom", "10px");
	document.execCommand("stop");
} else {
	setTimeout(function () {
		startHeartAnimation();
	}, 5000);

	timeElapse(together);
	setInterval(function () {
		timeElapse(together);
	}, 500);

	adjustCodePosition();
	$("#code").typewriter();
}
</script>
</body>
</html>